<template>
  <div class="wrapper">
    <dx-header-bar title="业务信息"></dx-header-bar>
    <dx-e-chart class="chart" ref="chartCpt"
                :color="['#2f86f6']"
                :x-axis-data="chartXAxisData"
                :series="chartSeries"
                @click.native="openBusiness"
    >
    </dx-e-chart>
    <div class="content-wrapper">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <thead>
        <tr>
          <th width="50%">专线类型</th>
          <th width="50%">数量</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td>
            {{item.LINE_TYPE}}
          </td>
          <td :class="{'is-link': item.NUM > 0}"
              @click="openBusi(item)">
            {{item.NUM}}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex';
import { DxHeaderBar, DxEChart } from '@/components';
import { Dialog, Toast } from 'mand-mobile';
import { getBusinessStatistics } from '@/api/resource';

export default {
  components: {
    DxHeaderBar,
    DxEChart
  },
  data() {
    return {
      customerCode: this.$route.query.customerCode,
      dataList: [],
      chartXAxisData: [],
      chartSeries: []
    };
  },
  // beforeRouteEnter(to, from, next) {
  //   // eslint-disable-next-line
  //   from.meta.keepAlive = true;
  //   next();
  // },
  // beforeRouteLeave(to, from, next) {
  //   // eslint-disable-next-line
  //   to.meta.keepAlive = false;
  //   next();
  // },
  computed: {
    ...mapState({
      // tabBar
      businessTypes: state => state.library.businessTypes
    })
  },
  mounted() {
    this.loadBusinessStatistics();
  },
  methods: {
    loadBusinessStatistics() {
      this.$refs.chartCpt.showLoading();
      getBusinessStatistics(this.customerCode).then(result => {
        const data = result.data;
        const xAxisData = [];
        const seriesData = [];
        if (data instanceof Array && data.length) {
          this.dataList = data;
          data.forEach(item => {
            xAxisData.push(item.LINE_TYPE);
            seriesData.push(item.NUM);
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: '没有找到业务数据',
            confirmText: '确定'
          });
        }
        this.chartXAxisData = [xAxisData];
        this.chartSeries = [
          {
            name: '数量',
            type: 'bar',
            data: seriesData,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            }
          }
        ];
        this.$nextTick(() => {
          this.$refs.chartCpt.updateChart();
        });
      }).catch(() => {
        Toast.failed('数据加载失败');
        this.$refs.chartCpt.hideLoading();
      });
    },
    openBusi(item) {
      if (item.NUM > 0) {
        this.$router.push({
          name: 'business',
          query: {
            timestamp: new Date().getTime(),
            businessType: this.businessTypes.find(type => type.value === item.LINE_TYPE).name,
            customerCode: this.customerCode
          }
        });
      }
    }
    // openBusiness() {
    //   this.$router.push({
    //     name: 'business',
    //     query: {
    //       customerCode: this.customerCode
    //     }
    //   });
    // }
  }
};
</script>

<style lang="stylus" scoped>
  .wrapper
    display : flex
    flex-direction : column
    height : 100%

  .content-wrapper
    flex : 1
    overflow-y : auto
    font-size : 28px

  .chart
    height : 400px
    width : 100%

  table
    line-height : 80px
    background : #fff
    text-align : center

  th, td
    border-bottom : 1px solid #eee
    border-right : 1px solid #eee

    &:last-of-type
      border-right : none

    &.is-link
      color : theme-color

  thead
    tr
      background : #f5f9fe

  tbody
    tr:nth-of-type(odd)
      background : #fff

    tr:nth-of-type(even)
      background : #f9f9f9
</style>
